<%@page import="ecom.appcode.common.bean.OrderDetailBean"%>
<%@page import="ecom.appcode.business.OrderDetailLogicImpl"%>
<%@page import="ecom.appcode.business.OrderDetailLogic"%>
<%@page import="ecom.appcode.business.CategoryLogicImpl"%>
<%@page import="ecom.appcode.business.CategoryLogic"%>
<%@page import="ecom.appcode.common.daobean.CategoryDaoBean"%>
<%@page import="java.util.List"%>
<%@page import="ecom.appcode.common.daobean.ShoesDaoBean"%>
<%@page import="ecom.appcode.common.model.ShoesModel"%>
<%@page import="ecom.appcode.business.ShoesLogic"%>
<%@page import="ecom.appcode.business.ShoesLogicImpl"%>
<%@page import="ecom.appcode.common.constants.CommonConstants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopy Mart - Responsive E-commerce Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" /> <!-- General style -->
<link href="css/prettyPhoto.css" type="text/css" rel="stylesheet" media="screen"><!-- prettyPhoto -->
<link href="css/tipsy.css" type="text/css" rel="stylesheet" media="screen"><!--zoom-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="js/css3-mediaqueries.js"></script><!--mediaqueries-->
<script type="text/javascript" src="js/modernizr-1.7.min.js"></script><!--modernizr-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script><!-- prettyPhoto -->
<script type="text/javascript" src="js/jquery.tipsy.js"></script><!--tooltip-->
<script type="text/javascript" src="js/jquery-hover-effect.js"></script><!--Image Hover Effect-->
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script><!--menu-->
<script type="text/javascript" src="js/jquery.dcmegamenu.1.3.3.js"></script><!--menu-->
<script type="text/javascript" src="js/jquery.quovolver.js"></script><!--blockquote-->
<script type="text/javascript" src="js/custom.js"></script><!--custom-->
<!--MENU-->
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-3').dcMegaMenu({
        rowItems: '2',
        speed: 'fast',
        effect: 'fade'
    });
});
</script>
</head>
 <%

   ShoesModel shoesModel = new ShoesModel();
   String date = CommonConstants.DATE_NEW_ARRIVALS;
   int index = CommonConstants.NUM_8;
   ShoesLogic shoesLogic = new ShoesLogicImpl();
   OrderDetailLogic orderDetailLogic = new OrderDetailLogicImpl();
   // Load top 8 New Arrivals Items
   List<ShoesDaoBean> shoesList = shoesLogic.loadNewArrivalsItems(date, index);
   shoesModel.setShoesListBean(shoesList);
   
   // Load top 20 Sale Item
   List<ShoesDaoBean> SaleList = shoesLogic.loadTop20SaleShoes();
   
   CategoryDaoBean categoryBean = new CategoryDaoBean();
   CategoryLogic cateLogic = new CategoryLogicImpl();
   List<CategoryDaoBean> cateList = cateLogic.loadCategoryName();
   
   // Load Color on combobox
   List<ShoesDaoBean> colorList = shoesLogic.loadColor();
   
   // Load Best Product
   List<OrderDetailBean> orderList = orderDetailLogic.selectBestProduct();
%>
  %>
<body>
    <div id="page_wrap">
        <header>
            <div id="top">
                <c:set var="email" value="${sessionScope.EMAIL}"></c:set>
                <span>
                <c:if test="${not empty email}">
                    Hello! ${sessionScope.EMAIL}
                </c:if>
                <c:if test="${empty email}">
                     <a href="register.jsp">Click here to register</a> 
                </c:if>
                </span>
               
            </div><!--end:top-->
            
            
            <div id="top2">
                <ul class="myaccountmenu">
                    <li><a href="my-account.jsp" class="first">My Account</a></li>
                    <!--  
                    <li><a href="wishlist.html">My Wishlist</a></li>
                    -->
                    <li><a href="view-cart.jsp">My Cart</a></li>
<!--                     <li><a href="CartAction?btAction=CheckOut&txtEmail=${email}">Checkout</a></li> -->
                    <li class="login">
                      <a href="#login-box" class="last login-window">
                          
                          <c:if test="${not empty email}">
                            <a href="ShoesIndexAction?valueBtn=Logout&txtLogoutPage=index.jsp">Logout</a>
                          </c:if>
                          <c:if test="${empty email}">
                                Login
                          </c:if>
                       </a>
                    </li>
                </ul>
                <!-- Login Popup -->
                <div id="login-box" class="login-popup">
                <a href="#" class="close"><img src="images/process-stop.png" class="btn_close" title="Close Window" alt="Close" /></a>
                  <form action="ShoesIndexAction" method="post" class="signin" >
                        <fieldset class="textbox">
                        <label class="username">
                        <span>Email</span>
                        <input id="username" name="txtEmail" type="text" autocomplete="on" placeholder="Username">
                        </label>
                        <label class="password">
                        <span>Password</span>
                        <input id="password" name="txtPassword" type="password" placeholder="Password">
                        </label>
                         <button  class="submit button" name="valueBtn" onclick="changeValueLoginHiddenField()" value="Login">Login</button>
                        <input type="hidden" name="valueBtn" id="txtValueBtn" value="abc">
                        <p>
                        <a class="forgot" href="#">Forgot your password?</a> / <a class="register" href="register.html">Create an Account</a>
                        </p>        
                        <input type="hidden" name="txtPage" value="index.jsp"> 
                        </fieldset>
                  </form>
                </div>
                <!-- start Demo header -->    
                <div id="demo-header">
                    <c:set value="${sessionScope.SHOP}" var="shop"></c:set>
                    <c:if test="${not empty shop}">
                    
                    <c:set var="total" value="0"/>
                    <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                        <c:set var="numberItem" value="${counter.count}"></c:set>
                        <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                    </c:forEach>
                    <a id="cart-link" href="#cart" title="Cart">${numberItem} Items - $${total}</a>
                    <div id="cart-panel">
                        <div class="item-cart">
                        <table>
                          <tbody>        
                          <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                            <tr>
                              <td class="image"><a href="product.html"><img width="60" height="60" src="${row.image}" alt="product" title="product"></a></td>
                              <td class="name"><a href="product.html">${row.shoesName}</a></td>
                              <td class="quantity">x&nbsp;${row.quantity}</td>
                              <td class="total">$${row.unitPrice * row.quantity}</td>
                              <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                              <td class="remove"><i class="icon-remove "></i></td>
                            </tr>
                          </c:forEach>
                          </tbody>
                        </table>
                        <table>
                          <tbody>
                            <tr>
                              <td class="textright"><b>Total:</b></td>
                              <td class="textright">$${total/2}</td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="buttoncart">
                          <a href="view-cart.jsp">View Cart</a>
                          <a href="CartAction?btAction=CheckOut&txtEmail=${email}">Checkout</a>
                        </div>
                    </div>
                    </c:if>
                    <c:if test="${empty shop}">
                    <c:set var="total" value="0"/>
                    <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                        <c:set var="numberItem" value="${counter.count}"></c:set>
                        <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                    </c:forEach>
                    <a id="cart-link" href="#cart" title="Cart">${numberItem} Items - $${total}</a>
                    
                    <div id="cart-panel">
                        <div class="item-cart">
                        <center><font color="orange">Cart is empty</font></center>

                    </div>
                    </c:if>
                    </div><!-- /login-panel -->
                </div><!-- /demoheader -->  
            </div><!--end:top2-->
            
            <div id="top3">
                <h1 class="logo"><a href="index.jsp">Shopy Mart</a></h1>
                <form action="ShoesIndexAction" method="post" class="search_bar">
                    <fieldset>
                              <div class="controls">
                                <small>Color:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <select id="select01" class="span3" name="txtSelectColor">
                                  <option>Select</option>
                                  <%
                                      for (int i = 0; i < colorList.size(); i++) {
                                              ShoesDaoBean colorBean = (ShoesDaoBean) colorList.get(i);                       
                                  %>
                                        <option><%= colorBean.getColor() %></option>
                                  <%
                                      }
                                  %> 
                                </select>
                              </div>
                      <input type="text" name="txtSearchShoesName" class="search" placeholder="Shoes Name"/>
                      <input type="submit" name="valueBtn" value="Search" class="submit" />
                    </fieldset>
                </form>
            </div><!--end:top3-->
        </header>
        <div id="container">
            <nav>  
                <ul id="mega-menu-3" class="mega-menu">
                    <li class="first"><a href="index.jsp" class="current">Home</a></li>
                    <li><a href="ShoesIndexAction?valueBtn=NewArrivals">New Arrivals</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);                       
                          %>
                                <li><a href='ShoesIndexAction?valueBtn=loadCategory&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                    </li>
                <li><a href="shoes.html">Mens</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);
                          %>
                                 <li><a href='ShoesIndexAction?valueBtn=loadCategoryBySex&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>&txtSex=mens'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                </li>
                <li><a href="brands.html">Women</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);
                          %>
                                 <li><a href='ShoesIndexAction?valueBtn=loadCategoryBySex&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>&txtSex=womens'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                </li>
                <li><a href="ShoesIndexAction?valueBtn=ViewSaleItem">Sales Item</a></li>
                <li><a href="contact.jsp">Contact</a></li>
                </ul>
            </nav><!--end:grey-->
            <div class="content-wrap">
                <div style="clear:both; display:block; height:20px"></div>
                <div id="intro">
                    <div class="one-fourth serv first">
                        <img src="images/service-1.png" alt="">
                        <h3><a href="#">Free Shipping</a></h3>
                        <span>Available</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-2.png" alt="">
                        <h3><a href="#">30 Days Return</a></h3>
                        <span>Easy Return</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-3.png" alt="">
                        <h3><a href="#">Call Us</a></h3>
                        <span>(63) 912 3456</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-4.png" alt="">
                        <h3><a href="#">Secured</a></h3>
                        <span>Checkout</span>
                    </div>
                </div>
                <div class="container-2">
                    <section class="content">
                        <h2>Register Account &nbsp;<small>Register your information details.</small></h2>
                        <form action="ShoesIndexAction" class="form-register" method="post">
                        <h3>Your Personal Details</h3>
                        <div class="registerbox">
                          <fieldset>
                            <div class="control-group">
                              <label class="control-label">
                                <span class="red">*</span> 
                                First Name:</label>
                              <div class="controls">
                                <input type="text"  class="input-xlarge" placeholder="First Name" name="txtFirstName">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label"><span class="red">*</span> 
                                Last Name:</label>
                              <div class="controls">
                                 <input type="text" class="input-xlarge" placeholder="Last Name" name="txtLastName">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label"><span class="red">*</span> 
                               Birthdate:</label>
                              <div class="controls">
                                 <input type="text" class="input-xlarge" placeholder="mm/dd/yyy" name="txtBirthDate">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label"><span class="red">*</span> 
                               Sex:</label>
                              <div class="controls">
                                <select name="cbbSex">
                                  <option value="Male">Male</option>
                                  <option value="Female">Female</option>
                                  <option value="Other">Other</option>
                                </select>
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label"><span class="red">*</span> 
                                Email:</label>
                              <div class="controls">
                                <input type="email" placeholder="Email" class="input-xlarge" name="txtRegisterEmail">
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label"><span class="red">*</span> Telephone:</label>
                              <div class="controls">
                                <input type="text" placeholder="Phone number" name="txtPhone" class="input-xlarge"><br> 
                              </div>
                            </div>
                          </fieldset>
                        </div>
                        <h3>Your Address</h3>
                        <div class="registerbox">
                          <fieldset>
                            <div class="control-group">
                              <label  class="control-label"><span class="red">*</span> Address</label>
                              <div class="controls">
                                <input type="text" placeholder="House Address" name="txtAddress" class="input-xlarge">
                              </div>
                            </div>
                          </fieldset>
                        </div>
                        
                   
                        <h3>Your Password</h3>
                        <div class="registerbox">
                          <fieldset>
                            <div class="control-group">
                              <label  class="control-label"><span class="red">*</span> Password:</label>
                              <div class="controls">
                                <input type="password" placeholder="Password" name="txtRegisterPassword" class="input-xlarge">
                              </div>
                            </div>
                            <div class="control-group">
                              <label  class="control-label"><span class="red">*</span> Password Confirm::</label>
                              <div class="controls">
                                <input type="password" placeholder="Re-Password" name="txtRePassword" class="input-xlarge">
                              </div>
                            </div>
                          </fieldset>
                        </div>
                        <div class="pull-right">
                          <label class="checkbox inline">
                            <input type="checkbox" value="option2" >
                          </label>
                          I have read and agree to the <a href="#" >Privacy Policy</a>
                          &nbsp;
                          <input type="Submit" class="submit" value="Register" name="valueBtn">
                        </div>
                      </form>
                    </section>
                    <aside class="sidebar">
                        <div class="side">
<h4>Bestsellers</h4>
                            
                                
                                  <%
                                      for (int i = 0; i < orderList.size(); i++) {
                                              OrderDetailBean orderBean = (OrderDetailBean) orderList.get(i); 
                                              int shoesID = orderBean.getShoesID();
                                              // SELECT BY ID
                                              ShoesDaoBean shoesBean = shoesLogic.loadAShoesProduct(shoesID);
                                  %>
                                  <div class="entry">
                                    <div class="da-thumbs">
                                      <div>
                                          <img src="<%= shoesBean.getUrlImage() %>" alt="">
                                          <article class="da-animate da-slideFromRight" style="display: block;">
                                              <p><a href="ShoesIndexAction?valueBtn=ViewProduct&txtShoesID=<%=shoesBean.getShoesID() %>" class="link"></a></p>
                                          </article>
                                      </div>   
                                    </div>
                                  <h3><a href="product-detail.html"><%= shoesBean.getShoesName() %></a></h3>
                                  <%
                                  if(shoesBean.getDiscount() == 100) {
                                      %> 
                                      <small>$<%= shoesBean.getUnitPrice() %></small>
                                      <% 
                                  } else {
                                      %> 
                                      <small>$<%= shoesBean.getUnitPrice()-shoesBean.getUnitPrice() * shoesBean.getDiscount() / 100 %></small>
                                      <%       
                                  }
                                  %>
                                  
                                 </div>    <!-- Close Entry -->
                                  <%
                                      }
                                  %> 
                        </div><!--end:side-->

                        <div class="side">
                            <h4>Our Customer Love Us!</h4>
                            <ul class="fade">                   
                                <li class="feed">Easy shopping experience! Pricing is attractive! Lots of styles to choose from and great pics!<br>
                                    <small><a href="#">&mdash; Louie Jie Mahusay</a></small>
                                </li>
                                <li class="feed">Easy shopping experience! Pricing is attractive! Lots of styles to choose from and great pics!<br>
                                    <small><a href="#">&mdash; Louie Jie Mahusay</a></small>
                                </li>
                                <li class="feed">Easy shopping experience! Pricing is attractive! Lots of styles to choose from and great pics!<br>
                                    <small><a href="#">&mdash; Louie Jie Mahusay</a></small>    
                                </li>
                                <li class="feed">Easy shopping experience! Pricing is attractive! Lots of styles to choose from and great pics!<br>
                                    <small><a href="#">&mdash; Louie Jie Mahusay</a></small>
                                </li>
                            </ul>
                        </div>
                    </aside>
                </div><!--end:container-2-->
                <div class="container-2">
                    <div style="clear:both; display:block; height:40px"></div>
                    <div class="ship">
                        <a href="#"><img src="images/service-1.png" alt=""></a>
                        <h4><a href="#">Free Shipping</a></h4>
                        <span>On order over $300</span>
                    </div>
                    <div class="subs">
                        <h4>Sign up for our Newsletter</h4>
                        <form action="#" method="post" class="subscribes">
                            <fieldset>
                              <input type="text" name="subscribe" class="subscribe" value="Subscribe" onBlur="if (this.value == ''){this.value = 'Subscribe'; }" onFocus="if (this.value== 'Subscribe') {this.value = ''; }" />
                              <input type="submit" name="submit" value="Submit" class="submit" />
                            </fieldset>
                        </form>
                    </div>
                </div><!--end:container-2-->
            </div><!--end:content-wrap-->
            <footer>
                <div class="content-wrap">
                    <div class="one-fourth first">
                        <h4>Information</h4>
                        <ul>
                            <li><a href="http://html5awesome.com/themeforest/shopymart/about.html">About Us</a></li>
                            <li><a href="#">Delivery Information</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Terms &amp; Condition</a></li>
                        </ul>
                    </div>
                    <div class="one-fourth">
                        <h4>Customer Services</h4>
                        <ul>
                            <li><a href="contact.html">Contact Us</a></li>
                            <li><a href="#">Shipping Returns</a></li>
                            <li><a href="#">Secure Shopping</a></li>
                        </ul>
                    </div>
                    <div class="one-fourth">
                        <h4>Extras</h4>
                        <ul>
                            <li><a href="brands.html">Brands</a></li>
                            <li><a href="#">Gift Vouchers</a></li>
                            <li><a href="#">Affiliates</a></li>
                            <li><a href="#">Special</a></li>
                        </ul>
                    </div>
                    <div class="one-fourth">
                        <h4>My Account</h4>
                        <ul>
                            <li><a href="account.html">My Account</a></li>
                            <li><a href="#">Order History</a></li>
                            <li><a href="wishlist.html">Wishlist</a></li>
                            <li><a href="#">Newsletter</a></li>
                        </ul>
                    </div>
                </div>
                <div class="content-wrap">
                    <div style="clear:both; display:block;" class="social-wrap"></div>
                    <ul class="social">
                        <li><a href="#" class="tip" title="Facebook"><img src="images/social-icon-facebook.png" alt="Facebook"></a></li>
                        <li><a href="#" class="tip" title="Dribbble"><img src="images/social-icon-dribbble.png" alt="Dribbble"></a></li>
                        <li><a href="#" class="tip" title="Flickr"><img src="images/social-icon-flickr.png" alt="Flickr"></a></li>
                        <li><a href="#" class="tip" title="Pinterest"><img src="images/social-icon-pinterest.png" alt="Pinterest"></a></li>
                        <li><a href="#" class="tip" title="Twitter"><img src="images/social-icon-twitter.png" alt="Twitter"></a></li>
                        <li><a href="#" class="tip" title="RSS"><img src="images/social-icon-rss.png" alt="RSS"></a></li>
                    </ul>
                    <ul class="payment">
                        <li><a href="#" class="tip" title="Paypal"><img src="images/payment-icon-paypal.png" alt="Paypal"></a></li>
                        <li><a href="#" class="tip" title="American Express"><img src="images/payment-icon-ae.png" alt="American Express"></a></li>
                        <li><a href="#" class="tip" title="Discover"><img src="images/payment-icon-discover.png" alt="Discover"></a></li>
                        <li><a href="#" class="tip" title="Master Card"><img src="images/payment-icon-mastercard.png" alt="Master Card"></a></li>
                        <li><a href="#" class="tip" title="Visa"><img src="images/payment-icon-visa.png" alt="Visa"></a></li>
                    </ul>
                    <p style="clear:both; display:block;">&copy; 2013 <a href="index.jsp">Shopymart</a>, All Rights Reserved. Designed by: <a href="#">louiejiemahusay</a></p>
                </div>
            </footer>
        </div><!--end:container-->
    </div><!--end:page_wrap-->
</body>
</html>
